<template>
   <div style="padding: 20px;">
      <el-form :model="formData" label-width="auto" style="max-width: 600px" :rules="formRules" ref="formRef">
         <el-form-item label="负责人" prop="ownerId">
            <el-select
                v-model="formData.ownerId"
                placeholder="请选择负责人"
                clearable
            >
                <el-option
                    v-for="owner in owners"
                    :key="owner.id"
                    :label="owner.name"
                    :value="owner.id"
                />
            </el-select>
         </el-form-item>
         <el-form-item label="活动名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入活动名称" clearable />
         </el-form-item>
         <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
                v-model="formData.startTime"
                type="date"
                placeholder="请选择开始时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
            />
        
         </el-form-item>
         <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
                v-model="formData.endTime"
                type="date"
                placeholder="请选择结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
            />
         </el-form-item>
         <el-form-item label="活动预算" prop="cost">
            <el-input v-model.number="formData.cost" placeholder="请输入活动预算" clearable />
         </el-form-item>
         <el-form-item label="活动描述" prop="description">
            <el-input v-model="formData.description" type="textarea" :rows="6"/>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="addOrUpdate(formRef)">提交</el-button>
            <el-button @click="router.go(-1)">返回</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>
<script lang="ts" setup name="ActivityDetail">
import { reactive ,ref,onMounted} from 'vue'
import Activity from '@/hooks/activity';
import { baseService } from '@/utils/httpReqest';
import { ElMessage } from 'element-plus';
import type { FormRules,FormInstance } from 'element-plus';
import router from '@/router';
import { useRoute } from 'vue-router';
let owners = ref<any[]>([])
let formRef = ref();
let route = useRoute();
let formRules = reactive<FormRules>({
   ownerId: [
      { required: true, message: '请选择负责人', trigger: 'blur' },
   ],
   name: [
      { required: true, message: '请设置活动名称', trigger: 'blur' },
      { min: 2, message: "活动名称最少2位", trigger: 'blur' }
   ],
   startTime: [{ required: true, message: '请选择活动时间', trigger: 'blur' },],
   endTime: [
      { required: true, message: '请选择结束时间', trigger: 'blur' },
   ],
   cost: [
      { required: true, message: '请填写预算', trigger: 'blur' },
   ],
   description: [
      { required: true, message: '请填入活动描述', trigger: 'blur' },
      { min: 1,max:255, message: "活动描述1-255个字", trigger: 'blur' }
   ],
  
})
let editId = undefined;
const formData = ref<Activity>(new Activity())
let getAllOwnerNames = () => {
    baseService.doGet("/user/getAllNames").then((res:any) => {
        if(res.code == 200){
            owners.value = res.data
        }else{
            ElMessage.error("获取用户用户名字列表出现错误")
        }
    })
}

onMounted(() => {
   getAllOwnerNames();
   if(route.params.id){
      editId = route.params.id;
      baseService.doGet(`/activity/info/${editId}`).then((res:any) => {
         if (res.code == 200) {
            formData.value = res.data
            
         } else {
            ElMessage.error("活动信息加载失败")
         }
      })
   }
})
let addOrUpdate = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            if (!formData.value.id) {
                // 增加用户
                baseService.doPost("/activity/add", formData.value).then((res: any) => {
                    if (res.code == 200) {
                        ElMessage.success("添加成功")
                        router.go(-1)
                    } else {
                        ElMessage.error("添加失败")
                    }
                })

            } else {
                // 修改用户
                baseService.doPut("/activity/update", formData.value).then((res: any) => {
                    if (res.code == 200) {
                        ElMessage.success("更新成功")
                        router.go(-1)
                    } else {
                        ElMessage.error("更新失败")
                    }
                })
            }
        } else {
            console.log('提交失败!')
        }
    })
}

</script>
<style scoped>

</style>